<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>方块动画</span>
      <el-button
        v-show="showBtn"
        style="float: right; padding: 0"
        type="text"
        @click="restart"
        >重新开始</el-button
      >
    </div>
    <div class="move-box" v-if="restartFlag">
      <div class="move1">move1</div>
      <div class="move2">move2</div>
      <div class="move3">move3</div>
      <div class="move4">move4</div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      restartFlag: true,
      showBtn: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.showBtn = true
    }, 4000)
  },
  methods: {
    restart() {
      this.restartFlag = false
      this.$nextTick(() => {
        this.restartFlag = true

        this.showBtn = false
        setTimeout(() => {
          this.showBtn = true
        }, 4000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.move-box {
  width: 300px;

  @keyframes move1 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(200px);
    }
  }

  @keyframes move2 {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(200px, 0);
    }
  }

  @keyframes move3 {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(200px, 0);
    }
    50% {
      transform: translate(200px, 150px);
    }
    75% {
      transform: translate(0, 150px);
    }
    100% {
      transform: translate(0, 0);
    }
  }

  @keyframes move4 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(200px, 0);
    }
  }

  div {
    width: 50px;
    height: 50px;
    text-align: center;

    &:hover {
      // 规定动画是否正在运行或暂停。
      animation-play-state: paused;
    }
  }

  .move1 {
    background-color: pink;
    animation-name: move1;
    animation-duration: 2s;
  }

  .move2 {
    background-color: purple;
    animation-name: move2;
    animation-duration: 2s;
    // 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    animation-fill-mode: forwards;
    color: #ffffff;
  }

  .move3 {
    background-color: royalblue;
    animation-name: move3;
    animation-duration: 4s;
    color: #ffffff;
  }

  .move4 {
    background-color: aquamarine;
    animation-name: move4;
    animation-duration: 2s;
    // 规定动画被播放的次数。
    animation-iteration-count: 2;
    // 规定动画是否在下一周期逆向地播放。
    // alternate: 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
    animation-direction: alternate;
  }
}
</style>
